<template>
  <view
    class="menu-item card-hover fade-in"
    :class="[size, { active: isActive }]"
    :style="customStyle"
    @click="handleClick"
  >
    <view
      class="item-icon-wrapper"
      :style="{ backgroundColor: iconBgColor || getRandomColor() }"
    >
      <up-icon
        :name="icon.toLowerCase()"
        :size="iconSize"
        color="#ffffff"
      ></up-icon>
    </view>
    <view class="item-content">
      <text class="item-title">{{ title }}</text>
      <text v-if="description" class="item-description">{{ description }}</text>
    </view>
    <view class="item-action">
      <up-icon
        v-if="showArrow"
        name="arrow-right"
        size="18"
        color="#cccccc"
      ></up-icon>
      <slot name="action"></slot>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  // 图标名称
  icon: {
    type: String,
    default: "grid",
  },
  // 图标大小
  iconSize: {
    type: [String, Number],
    default: 22,
  },
  // 图标背景色
  iconBgColor: {
    type: String,
    default: "",
  },
  // 菜单标题
  title: {
    type: String,
    required: true,
  },
  // 菜单描述
  description: {
    type: String,
    default: "",
  },
  // 是否激活
  isActive: {
    type: Boolean,
    default: false,
  },
  // 尺寸: small, medium, large
  size: {
    type: String,
    default: "medium",
    validator: (val) => ["small", "medium", "large"].includes(val),
  },
  // 自定义样式
  customStyle: {
    type: Object,
    default: () => ({}),
  },
  // 是否显示右侧箭头
  showArrow: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(["click"]);

// 随机颜色
const getRandomColor = () => {
  const colors = [
    "linear-gradient(135deg, #36CCCB, #188FFF)",
    "linear-gradient(135deg, #52C873, #009900)",
    "linear-gradient(135deg, #FFB545, #FF8C00)",
    "linear-gradient(135deg, #FF6B78, #E74C3C)",
    "linear-gradient(135deg, #A084DC, #645CBB)",
    "linear-gradient(135deg, #FF8FB1, #E74C3C)",
  ];

  // 使用标题生成固定的索引
  if (props.title) {
    const charSum = props.title
      .split("")
      .reduce((sum, char) => sum + char.charCodeAt(0), 0);
    return colors[charSum % colors.length];
  }

  return colors[Math.floor(Math.random() * colors.length)];
};

// 点击事件
const handleClick = () => {
  emit("click");
};
</script>

<style lang="scss" scoped>
.menu-item {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
  margin-bottom: 2rpx;

  &:active {
    opacity: 0.8;
  }

  &.active {
    border-left: 8rpx solid #1890ff;
  }

  // 尺寸变体
  &.small {
    padding: 20rpx;

    .item-icon-wrapper {
      width: 60rpx;
      height: 60rpx;

      :deep(.up-icon) {
        transform: scale(0.9);
      }
    }

    .item-title {
      font-size: 26rpx;
    }

    .item-description {
      font-size: 20rpx;
    }
  }

  &.medium {
    padding: 24rpx;

    .item-icon-wrapper {
      width: 80rpx;
      height: 80rpx;
    }

    .item-title {
      font-size: 30rpx;
    }

    .item-description {
      font-size: 24rpx;
    }
  }

  &.large {
    padding: 30rpx;

    .item-icon-wrapper {
      width: 100rpx;
      height: 100rpx;
    }

    .item-title {
      font-size: 34rpx;
    }

    .item-description {
      font-size: 26rpx;
    }
  }

  .item-icon-wrapper {
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
  }

  .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .item-title {
      font-weight: 500;
      color: #333333;
      margin-bottom: 6rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .item-description {
      color: #999999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .item-action {
    margin-left: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
